<template>
	<div id="app" class="app">
		<!-- 侧栏 -->
		<router-view name="slide"></router-view>

		<!--顶栏 -->
		<router-view name="header"></router-view>
		
		<!-- 主体 -->
		<transition
			 appear
			:enter-active-class="animateIn"
	 		:leave-active-class="animateOut"
	 		:mode="animateMode"
		>
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
// 引入必须的css
import 'mint-ui/lib/style.css'
import './assets/css/animate.css'

export default {
	name: 'app',
	data () {
		return {
		 
		}
	},
	computed : {
		animateIn(){
			return 'animated ' + this.$store.state.animateIn
		},
		animateOut(){
			return 'animated ' + this.$store.state.animateOut
		},
		animateMode(){
			return this.$store.state.animateMode
		}
	}
}
</script>

<style>
	@font-face {
		font-family: time;
		src : url(./assets/fonts/monaco.ttf);
	}
	* {
		font-family: time;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0;
		padding : 0;
	}
	img {
		max-width: 100%;
	}
	a {
		text-decoration: none;
		color: #666;
	}
	ul {
		list-style-type: none
	}
	div.app {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		height: 100vh;
		/*动画*/
		position: absolute;
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		background: #fff;
	}
</style>
